<template>
  <div class="newscontent">
    <!--问答详情-->
    <div class="page-container">
      <div class="container">
        <div class="row">
          <!--左边-->
          <div class="span8 page-content">
            <article class="type-post format-standard hentry clearfix">
              <h1 class="post-title">
                <a>{{content.article_title}}</a>
              </h1>
              <div class="post-meta clearfix">
                <span class="date">{{content.article_createtime| dataFormat}}</span>
                <span class="category">
                  <el-popover placement="right" width="400" trigger="hover">
                    <span>
                      <li class="comment even thread-odd thread-alt depth-1" id="li-comment-4">
                        <article id="comment-4">
                          <img
                            :src="content.avatar"
                            class="avatar touxiang avatar-60 photo"
                            height="60"
                            width="60"
                          />
                          <div class="comment-meta">
                            <h5 class="author">{{content.nickname}}</h5>
                            <p class="date" v-if="content.realstate==3">认证用户</p>
                            <p class="date" v-else>未认证用户</p>
                          </div>
                        </article>
                      </li>
                      <div class="xinxi">
                        <p style="color: #000;">账号：</p>
                        <p>{{content.username}}</p>
                      </div>
                      <div class="xinxi">
                        <p style="color: #000;">邮箱：</p>
                        <p>{{content.mail}}</p>
                      </div>
                      <div class="xinxi">
                        <p style="color: #000;">QQ：</p>
                        <p>{{content.qq}}</p>
                      </div>
                      <div class="xinxi">
                        <p style="color: #000;">个人简介：</p>
                        <p>{{content.synopsis}}</p>
                      </div>
                       <el-button
                         @click="jubao(content.username)"
                         style="margin:10px 150px"
                         type="danger"
                         plain
                       >举报</el-button>
                    </span>
                    <a
                      href="#"
                      slot="reference"
                      title="View all posts in Server &amp; Database"
                    >{{content.nickname}}</a>
                  </el-popover>
                </span>
                <span class="comments">
                  <a
                    href="#"
                    title="Comment on Integrating WordPress with Your Website"
                  >{{commentnum}} Comments</a>
                </span>
              </div>
              <pre v-html="content.article_content"></pre>
            </article>
            <div class="like-btn">
              <span class="tags">
                <strong>标签</strong>
                <span
                  v-for="(tag,id) in content.help_tag"
                  @click="$router.push(`/help/${tag}`) "
                  :key="id"
                  class="label"
                >{{tag}}</span>
              </span>
            </div>
            <comment />
          </div>
          <!--右边-->
          <aside class="span4 page-sidebar">
            <carousel />
            <news />
          </aside>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import carousel from '../../components/carousel.vue'
import comment from '../../components/comment.vue'
import news from '../../components/news.vue'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'newscontent',
  components: { carousel, comment, news },
  data () {
    return {
      content: {}
    }
  },
  props: {
    id: {}
  },
  computed: {
    ...mapState({
      commentnum: state => state.commentnum
    })
  },
  methods: {
    ...mapActions(['setcontentid', 'setcontentinfo']),
    jubao (username) {
      const url = escape(window.location.href)
      this.$router.push({ path: '/report', query: { user: username, url: url } })
    },
    async getArticleContent () {
      const data = {
        id: this.id
      }
      const result = await this.$axios.post('/web/getarticlecontent', this.qs.stringify(data))
      if (result.data.state.type === 'SUCCESS') {
        this.content = result.data.data
        this.setcontentinfo({
          contentname: result.data.data.article_title,
          contentuserid: result.data.data.user_id
        })
        // this.content.help_tag = res.data.data.help_tag.split(",");
      }
    }
  },
  watch: {
    id: {
      handler (newVal) {
        this.getArticleContent()
        this.setcontentid(this.id)
      },
      deep: true,
      immediate: true
    }
  },
  created () {
    this.setcontentid(this.id)
  }
}
</script>

<style scoped>

</style>
